<!-- 勾选协议 -->
<template>
	<uv-checkbox-group class="xy" v-model="checkbox" iconSize="30rpx" size="30rpx">
		<uv-checkbox name="xy">
			<view class="checkbox d-flex pl-10 relative">
				我已阅读并同意
				<navigator class="checkbox_btn activeText" url="/protocol/user">《用户协议》</navigator>
				<navigator class="checkbox_btn activeText" url="/protocol/privacy">《隐私政策》</navigator>
				<navigator v-for="(item, index) of list" :key="index" :url="item.url" class="checkbox_btn activeText">《{{ item.title }}》</navigator>
				{{ describe }}
			</view>
		</uv-checkbox>
	</uv-checkbox-group>
</template>

<script setup>
import { reactive, ref, defineProps, defineExpose } from 'vue'

const props = defineProps({
	list: {
		type: Array,
		default: () => []
	},
	describe: {
		type: String,
		default: ''
	}
})

const checkbox = ref([])

const submit = () => {
	return new Promise((resolve, reject) => {
		if (checkbox.value.length === 0) {
			uni.showToast({
				title: '请勾选协议',
				icon: 'none',
				duration: 3000
			})
			reject(false)
		} else {
			resolve(true)
		}
	})
}

defineExpose({
	submit
})
</script>

<style scoped lang="scss">
.xy {
		.uv-checkbox {
			width: 100%;
			align-items: baseline;
			flex-wrap: nowrap;
			
			::v-deep {
				.uv-checkbox__icon-wrap {
					position: relative;
					top: 2px;
				}
				.uv-checkbox__label-wrap {
					width: 100%;
					padding-left: 3rpx;
					
					.checkbox {
						word-break: break-word;
						flex-wrap: wrap;
						font: {
							size: 26rpx
						}
					}
				}
			}
		}
	}
</style>